<template>
	<div id="rec">
		<mt-swipe :auto="4000">
		  <mt-swipe-item v-for="(ban,i) in banners" :key="i">
		  	<img :src="ban.picUrl"/>
		  </mt-swipe-item>
		</mt-swipe>
		<div class="tj_gedan cf"><p>推荐歌单</p><i class="iconfont icon-gengduo gd"></i></div>
			<mt-spinner v-show="gedan == []" type="fading-circle"></mt-spinner>
		<div class="gedan">
			<div class="gedan_li" v-for="(g,i) in gedan.slice(0,3)" @click="jump_tj(g.id)">
				<p class="playcount">
					<i class="iconfont icon-yinle"></i>
					<span>{{(g.playCount/10000).toFixed(1)}}万</span>
				</p>
				<div class="gedan_img">
					<img v-lazy="g.picUrl"/>
				</div>
				<p class="gedan_p">{{g.name}}</p>
			</div>
		</div>
		<div class="gedan">
			<div class="gedan_li" v-for="g in gedan.slice(4,7)" @click="jump_tj(g.id)">
				<p class="playcount">
					<i class="iconfont icon-yinle"></i>
					<span>{{(g.playCount/10000).toFixed(1)}}万</span>
				</p>
				<div class="gedan_img">
					<img v-lazy="g.picUrl"/>
				</div>
				<p class="gedan_p">{{g.name}}</p> 
			</div>
		</div>
		
		<div class="tj_gedan cf"><p>推荐电台</p><i class="iconfont icon-gengduo gd"></i></div>
			<mt-spinner v-show="gedan == []" type="fading-circle"></mt-spinner>
		<div class="gedan">
			<div class="gedan_li" v-for="(d,i) in Dj.slice(0,3)">
				
				<div class="gedan_img">
					<img v-lazy="d.picUrl"/>
				</div>
				<p class="gedan_p">{{d.name}}</p>
			</div>
		</div>
	</div>  
	
</template>

<script>
	
	import axios from 'axios';
	//输出
	export default{
		beforeMount(){
			//请求轮播
			axios.get("https://netease.bluej.cn/banner?timestamp=11").then( (res)=>{
				console.log(res.data)
				this.banners=res.data.banners;
			}),
			axios.get("https://netease.bluej.cn/personalized?timestamp=11").then( (res)=>{
				this.gedan = res.data.result;
				console.log("gedan",this.gedan)
			}),
			axios.get("https://netease.bluej.cn/personalized/djprogram?timestamp=11").then( (res)=>{
				console.log("Dj",res)
				this.Dj = res.data.result;
			})
		},
		data(){
			return{
				banners:[],
				gedan:[],
				Dj:[]
			}
		},
		methods:{
			jump_tj(id){
				console.log("sd",this)
				this.$parent.$parent.flag=false;
				this.$router.push({path:"/tjGd",query:{gdId:id}});
				
			}
		}
		
	}
	
</script>

<style lang="scss">
	#rec{
		padding-top:88px;
		padding-bottom: 60px;
		.mint-swipe{
			height: 46vw;
			margin-bottom:14px;
			
			
			img{
				width: 100%;
			}
		}
		.tj_gedan{
			padding-left: 20px;
			margin-bottom: 10px;
			p{
				padding-left: 5px;
				color: white;
				float: left;
				font-size: 15px;
				border-left: 3px solid #D43C33;
				display: inline-block;
			}
			.gd{
				color: white;
			    font-size: 15px;
			    float: left;
			    padding-top: 2px;
			    padding-left: 2px;
				
			}
		}
		.gedan{
			padding-bottom: 10px;
			display: flex;
			display: -webkit-flex;
			justify-content: space-around;
			.gedan_li{
				width: 30%;
				display: inline-block;
				position:relative;
				.playcount{
					position: absolute;
					right: 5px;
					top: 1px;
					i{
					color: white;
					font-size: 12px;
					}
					span{
						color: white;
						font-size: 12px;
					}
				}
				
				.gedan_img{
					display: inline-block;
					img{
						width:100%;
					}
				}
				.gedan_p{
					color: white;
					display: inline-block;
					font-size: 12px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					letter-spacing: 3px;
				}
			}
		}
	}
	
</style>